import { User2 } from "lucide-react";

import type { UserSummary } from "@/contexts/auth-context";

interface UserSummaryCardProps {
  user: UserSummary;
}

export function UserSummaryCard({ user }: UserSummaryCardProps) {
  return (
    <div className="rounded-lg border border-border bg-card p-6 shadow-sm">
      <div className="flex items-center gap-3">
        <span className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
          <User2 className="h-5 w-5" />
        </span>
        <div>
          <p className="text-sm font-medium">{user.displayName}</p>
          <p className="text-xs text-muted-foreground">{user.email}</p>
        </div>
      </div>
      <div className="mt-4 space-y-2 text-xs text-muted-foreground">
        <div className="flex items-center justify-between">
          <span>角色</span>
          <span>{user.roles.join(" / ") || "未分配"}</span>
        </div>
        {user.phone ? (
          <div className="flex items-center justify-between">
            <span>联系电话</span>
            <span>{user.phone}</span>
          </div>
        ) : null}
      </div>
    </div>
  );
}
